/*
 * @Description: 自检结论
 * @Author: mengjiajun
 * @Date: 2023-12-27 15:21:25
 * @LastEditors: mengjiajun
 * @LastEditTime: 2023-12-27 16:10:50
 * @FilePath: \foodstuff-safety-responsibility\src\pages\IntelFilling\components\WeekReport\components\SelfTestConclusion\index.tsx
 */

import { Button } from "@taroify/core";
import { ArrowRight } from "@taroify/icons";
import { View, Text } from "@tarojs/components";
import classNames from "classnames";
import { useState } from "react";

const SelfTestConclusion: React.FC = () => {
  const [curStep] = useState(1);

  const [curUnfold, setCurUnfold] = useState<number[]>([]);

  const [options] = useState([
    {
      title: "生产环境条件",
    },
    {
      title: "进货查验",
    },
    {
      title: "生产过程控制",
    },
  ]);

  return (
    <View className="w-full h-[100vh] flex flex-col">
      <View className="flex">
        {["检查填报", "自检结论", "信息提交"].map((_item, _index) => (
          <View
            key={_index}
            className="h-[80px] w-1/3 flex items-center justify-evenly"
          >
            <View
              className={classNames(
                "w-5 h-5 rounded-full flex items-center justify-center text-white",
                curStep === _index
                  ? " bg-[#3388ff]"
                  : "bg-[rgba(51,136,255,0.5)]"
              )}
            >
              {_index + 1}
            </View>
            <Text>{_item}</Text>
            <ArrowRight />
          </View>
        ))}
      </View>
      <View className="flex-1 bg-[#FDEDDA] p-4 flex flex-col gap-2">
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            整体检查结果
          </View>
          <View className="flex flex-col gap-1 p-4 bg-white rounded-lg">
            <Text>检查项数： 47</Text>
            <Text>不符合项数： 0</Text>
            <Text>不适用项数： 0</Text>
          </View>
        </View>
        {options.map((_item, _index) => (
          <View className="w-full bg-white rounded-lg" key={_index}>
            <View className="text-[#694111] h-[80px] flex items-center justify-between px-3">
              <Text>{`${_index + 1}.${_item.title}`}</Text>
              <Text
                onClick={() => {
                  if (curUnfold.includes(_index)) {
                    setCurUnfold(
                      curUnfold.filter((unfold) => unfold !== _index)
                    );
                  } else {
                    setCurUnfold([...curUnfold, _index]);
                  }
                }}
              >
                {curUnfold.includes(_index) ? "收起" : "展开"}
              </Text>
            </View>
            {curUnfold.includes(_index) ? (
              <View className="flex flex-col gap-1 p-4">
                <Text>检查项数： 47</Text>
                <Text>不符合项数： 0</Text>
                <Text>不适用项数： 0</Text>
              </View>
            ) : null}
          </View>
        ))}

        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            检查人员
          </View>
          <View className=" h-[80px] flex items-center justify-between px-3  bg-white rounded-lg">
            <Text>检查人员电子签名</Text>
            <Text className="text-[#38f]">待签名</Text>
          </View>
        </View>

        <View className="w-full h-[160px] flex gap-2 px-[24px] items-center flex-shrink-0">
          <Button color="primary" className="w-1/2">
            上一步
          </Button>
          <Button color="primary" className="w-1/2">
            保存并下一步
          </Button>
        </View>
      </View>
    </View>
  );
};

export default SelfTestConclusion;
